<template>
	<div id="app">
	    <div style="margin-top: 15px;">
	        <el-input @input="monitorContent" placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px">
	            <el-select v-model="select" slot="prepend" placeholder="请选择">
	                <el-option label="姓名" value="1"></el-option>
	            </el-select>
	            <el-button @click="fuzzySearch" slot="append" icon="el-icon-search" style="background-color: lightgoldenrodyellow"></el-button>
	        </el-input>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<!--        添加一条新记录-->
	        <el-button type="primary" icon="el-icon-edit" @click="ofOpenAdd" plain >新增</el-button>
	        <!-- 点击弹框-->
	        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
	            <el-form  :model="supplier" label-width="80px"> 
	                <el-form-item label="供应商名称">
	                    <el-input v-model="supplier.name"></el-input>
	                </el-form-item>
					<el-form-item label="联系人">
					    <el-input v-model="supplier.contact"></el-input>
					</el-form-item>
					<el-form-item label="联系电话">
					    <el-input v-model="supplier.number"></el-input>
					</el-form-item>
					<el-form-item label="联系地址">
					    <el-input v-model="supplier.address"></el-input>
					</el-form-item>
					<el-form-item label="备注">
					    <el-input v-model="supplier.remarks"></el-input>
					</el-form-item>
	            </el-form>
	            <span slot="footer" class="dialog-footer">
	        <el-button @click="dialogVisible = false">取 消</el-button>
	        <el-button type="primary" @click="openAdd">确 定</el-button>
	      </span>
	        </el-dialog>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<!--        批量删除-->
	        <el-button type="danger" icon="el-icon-delete" @click="deleteIds" plain>删除</el-button>
			
			<!-- <el-button type="success" plain style="float: right;margin-right: 100px;" @click="saveUpdate">保存</el-button> -->
	
	    </div>
	
	<!-- 表格 -->
	    <div>
	        <el-table
	                ref="multipleTable"
	                tooltip-effect="dark"
	                @selection-change="handleSelectionChange"
	
	                :data="tableData"
	                stripe
	                style="width: 100%">
	            <el-table-column
	                    type="selection"
	                    width="55">
	            </el-table-column>
	            <el-table-column
	                    prop="id"
	                    label="编号"
	                    width="180">
	            </el-table-column>
	            <el-table-column
	                    prop="name"
	                    label="供应商名称"
	                    width="180">
	            </el-table-column>
				<el-table-column
				        prop="contact"
				        label="联系人"
				        width="180">
				</el-table-column>
				<el-table-column
				        prop="number"
				        label="联系电话"
				        width="180">
				</el-table-column>
				<el-table-column
				        prop="address"
				        label="联系地址"
				        width="180">
				</el-table-column>
				<el-table-column
				        prop="remarks"
				        label="备注"
				        width="180">
				</el-table-column>
				
	           
	            <el-table-column
	                    label="操作">
	                <template slot-scope="scope">
	                    <el-button type="primary" @click="openUpdate(scope.row)" plain>修改</el-button>
	                    <!-- 点击修改弹框，带有默认值-->
	                    <el-dialog title="修改" :visible.sync="dialogUpdate" width="30%">
	                        <el-form  :model="supplier" label-width="80px">
	                            <el-form-item label="编号:">
	                                <el-input v-model="supplier.id" readonly></el-input>
	                            </el-form-item>
	                            <el-form-item label="供应商名称:">
	                                <el-input v-model="supplier.name" ></el-input>
	                            </el-form-item>
								<el-form-item label="联系人:">
								    <el-input v-model="supplier.contact" ></el-input>
								</el-form-item>
								<el-form-item label="联系电话:">
								    <el-input v-model="supplier.number" ></el-input>
								</el-form-item>
								<el-form-item label="联系地址:">
								    <el-input v-model="supplier.address" ></el-input>
								</el-form-item>
								<el-form-item label="备注:">
								    <el-input v-model="supplier.remarks" ></el-input>
								</el-form-item>
	                        </el-form>
	                        <span slot="footer" class="dialog-footer">
	                            <el-button @click="dialogUpdate = false">取 消</el-button>
	                            <el-button type="primary" @click="ofUpdate">确 定</el-button>
	                        </span>
	                    </el-dialog>
	
	                    <el-button type="danger" @click="openDelete(scope.row.id)" plain>删除</el-button>
	                </template>
	            </el-table-column>
	        </el-table>
	    </div>
	
	    <div class="block">
	        <el-pagination
	                @size-change="handleSizeChange"
	                @current-change="handleCurrentChange"
	                :current-page="querySupplierVo.currentPage"
	                :page-sizes="[3, 5, 10, 20]"
	                :page-size="querySupplierVo.sizePage"
	                layout="total, sizes, prev, pager, next, jumper"
	                :total="total">
	        </el-pagination>
	    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//表格中的数据，由后端传值
				tableData: [],
				//供应商后台接收对象
				querySupplierVo: {
					name: '',
					currentPage: 1,
					sizePage: 3,
				},
				//总记录数
				total: 20,
				//供应商对象
				supplier: {
					id:'',
					address: '',
					contact:'',
					name:'',
					number:'',
					remarks:''
				},
				//搜索输入框
				input: '',
				//搜素下拉列表
				select: '',
				//新增弹窗
				dialogVisible: false,
				//关于修改的弹窗
				dialogUpdate: false,
				//批量删除的id
				ids: [],
			}
		},
		methods:{
			//页面加载完后调用的方法
			queryDate(){
				this.postRequest('/supplier/likeQuery',this.querySupplierVo).then(result=>{
					this.tableData=result.data.list;
					this.total=result.data.total;
				})
			},
			//模糊查询
			fuzzySearch() {
				if(this.select == 1){
					this.querySupplierVo.name=this.input;
				}
				this.queryDate();
			},
			//打开新增弹窗
			ofOpenAdd(){
				this.dialogVisible=true;
				//清除默认值
				this.supplier.id='';
				this.supplier.address='';
				this.supplier.contact='';
				this.supplier.name='';
				this.supplier.number='';
				this.supplier.remarks='';
			},
			//点击确定新增一条数据
			openAdd(){
				this.postRequest('/supplier/save',this.supplier).then(result => {
					this.queryDate();
				});
				//关闭弹窗
				this.dialogVisible=false;
			},
			//关于分页
			handleSizeChange(val){
				this.querySupplierVo.sizePage=val;
				this.queryDate();
			},
			handleCurrentChange(val){
				this.querySupplierVo.currentPage=val;
				this.queryDate();
			},
			//复选框获取id，用于批量删除
			handleSelectionChange(val){
				var idm = [];
				for(let supplier of val){
					idm.push(supplier.id);
				}
				this.ids=idm;
			},
			//打开修改弹窗
			openUpdate(row){
				this.supplier.id=row.id;
				this.supplier.address=row.address;
				this.supplier.contact=row.contact;
				this.supplier.name=row.name;
				this.supplier.number=row.number;
				this.supplier.remarks=row.remarks;
				
				this.dialogUpdate=true;
			},
			//修改
			ofUpdate(){
				this.postRequest('/supplier/update',this.querySupplierVo).then(result=>{
					this.queryDate()
				});
				//关闭弹窗
				this.dialogUpdate=false;
			},
			//单个删除
			openDelete(){
				this.$confirm('删了？确定？','提示',{
					confirmButtonText: '删了吧',
					cancelButtonText: '还是算了',
					type: 'warning'
				}).then(()=>{
					console.log(id);
					this.deleteRequest('/supplier/delOne/'+id).then(result=>{
						if(this.total%this.querySupplierVo.sizePage === 1){
							this.querySupplierVo.currentPage--;
						}
						this.queryDate();
					});
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '取消删除了'
					});
				});
			},
			monitorContent(){
				
			},
			//批量删除
			deleteIds(){
				this.$confirm('删了？','提示',{
					confirmButtonText: '删！',
					cancelButtonText: '算了',
					type: 'warning'
				}).then(() => {
					if(this.ids.length != 0){
						this.deleteRequest('/supplier/delBatch',this.ids).then(result=>{
							if(this.ids.length === this.tableData.length){
								this.querySupplierVo.currentPage--;
							}
							this.queryDate();
						})
					}else {
						this.$message({
							type: 'info',
							message: '无法选中记录'
						});
					}
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},
		mounted(){
			this.queryDate();
		},
		filters: {
			
		}
	}
</script>

<style>
	.el-select .el-input {
	    width: 130px;
	}
	.input-with-select .el-input-group__prepend {
	    background-color: #fff;
	}
</style>
